<template>
  <div>
    <div class="recommend-title">周末去哪</div>
    <div class="recomment-content" v-for="item in weekendList" :key="item.id">
      <img class="recommend-img" :src="item.imgUrl" alt="">
      <div class="recommend-info">
        <h3 class="recommend-contitle">{{ item.title }}</h3>
        <p class="recommend-contrad">{{ item.infoText }}</p>
      </div>
    </div>
    <div class="recommend-lookall">去哪网，去哪，哪都能去</div>
  </div>
</template>

<script>
export default {
  name: 'HomrRecommend',
  props: {
    weekendList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .recommend-title
    font-size: .30rem
    color: $baseTextColor
    height: .74rem
    line-height: .74rem
    padding-left: .20rem
    background: #eee
  .recomment-content
    border-bottom: 1px solid #f7f7f7
    background-color: #fff
    .recommend-img
      width: 100%
    .recommend-info
      padding: .3rem .2rem
      .recommend-contitle
        font-size: .32rem
        padding-bottom: .15rem
        ellipsis()
      .recommend-contrad
        font-size: .26rem
        color: #ccc
        ellipsis()
  .recommend-lookall
    padding: .2rem 0
    color: $bgColor
    text-align: center
    font-size: .30rem
</style>
